<template>
  <!-- 简答题  类名short-->
  <div class="problem-box short p12">
    <div class="peoblem-main">
      <div class="problem-body">
        <div class="porblem-title">
          <i class="tag-type">简答</i>
          <h1 class="richText" v-html="title"></h1>
        </div>
        <div class="problem-content">
          此类型的题目暂不支持作答，你可以点击右下角
          <i class="look-icon icon icon16"></i>图标查看答案解析
        </div>
        <div class="problem-answer p12" v-if="show_answer">
          <div class="anser">
            <span>答案：</span>
            <p class="richText" v-html="correct_option"></p>
          </div>
          <div class="analysis">
            <span>解析：</span>
            <p class="richText" v-html="parse"></p>
          </div>
        </div>
        <div class="problem-note bgc-fff bor4 p12" v-if="notes!='' && show_note">
          <div class="note-title">
            <h5>笔记</h5>
          </div>
          <div class="note-content">
            <p class="richText" v-html="notes"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 题目详情
    details: {
      type: Object,
      default: ()=>{}
    },
    //笔记显示
    show_note: {
      type: Boolean,
      defaule: false
    },
    // 答案显示
    show_answer: {
      type: Boolean,
      defaule: false
    }
  },
  data(){
    return{
      title: this.details.title, //标题
      correct_option: this.details.correct_option, //答案
      parse: this.details.parse, //解析
      notes: this.details.notes //笔记
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/css/problem.css";
</style>


